<template>
  <div>
    <h4>购物车清单</h4>
    <!-- 操作面板 -->
    <table border="1px" cellspacing="0" width="100%">
      <!-- 表头 -->
      <thead>
        <tr>
          <th>
            <label>
              <input type="checkbox" v-model="allChecked" />
              全选
            </label>
          </th>
          <th>商品</th>
          <th>数量</th>
          <th>单价(元)</th>
          <th>数量(元)</th>
          <th>操作</th>
        </tr>
      </thead>
      <!-- 表体 -->
      <tbody class="pand">
        <tr v-for="(item, index) in tableData" :key="index">
          <td><input type="checkbox" v-model="item.checked" /></td>
          <td>
            <div class="flex-box">
              <img :src="item.logo" alt="" />
              <p>{{ item.name }}</p>
            </div>
          </td>
          <td>
            <div class="flex-box">
              <button class="btn-w-20" @click="reduce(item)">-</button>
              <input type="text" class="input-w-30" v-model="item.count" />
              <button class="btn-w-20" @click="add(item)">+</button>
            </div>
          </td>
          <td class="tred">
            {{ item.price | suffix }}
          </td>
          <td class="tred">
            {{ (item.price * item.count) | suffix }}
          </td>
          <td>
            <button @click="del(index)">删除</button>
          </td>
        </tr>
      </tbody>
      <!-- 底部 -->
      <tfoot>
        <tr>
          <td colspan="6">
            <ul class="flex-box space-between">
              <li><button @click="removeSelect">删除所选商品</button></li>
              <li>
                <span class="tred">{{ state.count }}</span>
                件商品总计（不含运费）
                <span class="tred">
                  {{ state.totalPrice | suffix }}
                </span>
                <button>去结算</button>
              </li>
            </ul>
          </td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>

<script>
const ajaxData = [
  {
    id: 1,
    name: "女鞋",
    price: 300,
    logo: require("@/assets/12-2/1.webp"),
    count: 2,
  },
  {
    id: 2,
    name: "厨具",
    price: 2000,
    logo: require("@/assets/12-2/2.webp"),
    count: 1,
  },
  {
    id: 3,
    name: "口红",
    price: 120,
    logo: require("@/assets/12-2/3.webp"),
    count: 3,
  },
];
export default {
  //过滤器
  filters: {
    suffix(value) {
      let price = Number(value);
      return `￥ ${value.toFixed(2)}`;
    },
  },
  computed: {
    //是一个全选
    allChecked: {
      get() {
        const checkeds = this.tableData.filter((item) => item.checked);
        return checkeds.length === this.tableData.length;
      },
      set(state) {
        this.tableData = this.tableData.map((item) => {
          item.checked = state;
          return item;
        });
      },
    },
    //是一个全选，选中条数，总计价格
    state() {
      // 监听tableData数据
      const checkeds = this.tableData.filter((item) => item.checked);
      const checked = checkeds.length === this.tableData.length;
      const totalPrice = checkeds.reduce((a, b) => {
        return a + b.price * b.count;
      }, 0);
      return { count: checkeds.length, checked, checkeds, totalPrice };
    },
  },
  data() {
    return {
      tableData: [],
    };
  },
  mounted() {
    window.fetch("/").then(() => {
      //得到了接口数据，对数据进行一个处理
      //给数据每一条加一个checked属性
      this.tableData = ajaxData.map((item) => {
        item.checked = false;
        return item;
      });
    });
  },
  methods: {
    //删除被选中的数据
    removeSelect() {
      this.tableData = this.tableData.filter((item) => {
        if (!item.checked) {
          return item;
        }
      });
    },
    //删除物品
    del(index) {
      this.tableData.splice(index, 1);
    },
    //减少购买
    reduce(data) {
      //如果值为0，checked值为false
      //如果为0，就不能再减了
      if (data.count > 0) {
        data.count--;
      }
      if (data.count === 0) {
        data.checked = false;
      }
    },
    //增加购买
    add(data) {
      //增加的量不能超过库存数
      if (data.count === 5) {
        this.$message({
          message: "已超过限制数量",
          type: "error",
        });
      } else {
        data.count++;
      }
    },
  },
};
</script>

<style lang="scss">
li {
  list-style: none;
}
.flex-box {
  display: flex;
  justify-content: center;
}
.space-between {
  justify-content: space-between;
}
.btn-w-20 {
  width: 20px;
}
.tred {
  color: #ff0000;
}
img {
  width: 100px;
}
.input-w-30 {
  width: 30px;
}
.pand {
  text-align: center;
}
</style>
